<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <title>timer</title>
    <style>
        .courseTable {
            padding: 15px;
        }

        .courseTable .title {
            padding: 0 0 15px 0;
            font-size: 16px;
            color: #d50000;
            text-align: center;
        }

        .liveCourse {
            width: 100%;
            border-collapse: collapse;
            text-align: center;
        }

        .liveCourse tr {
            height: 40px;
        }

        .liveCourse tr td.liveTimer {
            width: 92px;
        }

        .liveCourse tr td.liveStatus {
            width: 70px;
            position: relative;
        }

        .liveCourse tr td.liveStatus:after {
            content: '回看';
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 60px;
            height: 30px;
            line-height: 30px;
            position: absolute;
            color: #FFF;
            background-color: #1E63B0;
            cursor: pointer;
            border-radius: 5px;
        }

        .liveCourse tr.hl td.liveStatus:after {
            content: '直播中';
            background-color: red;
        }

        .liveCourse tr td.liveStatus:hover:after {
            color: #000;
        }

        .liveCourse tr.hl ~ tr td.liveStatus:after {
            content: '未开始';
            background-color: #CCCCCC;
            pointer-events: none;
        }

        .liveCourse tr.hl ~ tr td.liveStatus {
            pointer-events: none;
        }
    </style>
</head>
<body>

<div class="courseTable">
    <div class="title">直播时间表</div>
    <table class="liveCourse">
        <tr>
            <td class="liveTimer">10:00-10:30</td>
            <td class="liveStatus"></td>
            <td>牛股速递</td>
            <td>孙腾</td>
        </tr>
        <tr>
            <td class="liveTimer">10:30-11:30</td>
            <td class="liveStatus"></td>
            <td>高手解盘</td>
            <td>闵庆华</td>
        </tr>
        <tr>
            <td class="liveTimer">13:30-14:30</td>
            <td class="liveStatus"></td>
            <td>与牛共舞</td>
            <td>魏丹丹</td>
        </tr>
        <tr>
            <td class="liveTimer">14:30-15:00</td>
            <td class="liveStatus"></td>
            <td>金股建仓</td>
            <td>孙腾</td>
        </tr>
        <tr>
            <td class="liveTimer">15:00-19:00</td>
            <td class="liveStatus"></td>
            <td>经典课程</td>
            <td>节目录播</td>
        </tr>
        <tr>
            <td class="liveTimer">19:00-19:45</td>
            <td class="liveStatus"></td>
            <td>赢家有道</td>
            <td>闵庆华</td>
        </tr>
        <tr>
            <td class="liveTimer">19:45-20:30</td>
            <td class="liveStatus"></td>
            <td>股海争锋</td>
            <td>孙腾</td>
        </tr>
    </table>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //点击直播中
        $(".liveCourse tr.hl td.liveStatus").click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            //直播链接
            window.open("http://www.baidu.com");
        });

        //点击回看
        $(".liveCourse tr td.liveStatus").click(function (e) {
            if ($(this).parents("tr").hasClass("hl"))return;
            e.preventDefault();
            e.stopPropagation();
            //回看链接
            window.open("http://www.yngw518.com");
        });

    });

    //检测当前时间段是否在直播中
    function checkCourseTimer() {

        $(".liveCourse tr").each(function (index, item) {
            var timer = $(item).find("td.liveTimer").html();
            var str = timer.split("-");
            var beginTime = $.trim(str[0]);
            var endTime = $.trim(str[1]);
            var week = new Date().getDay();
            //判断当前时间在周一至周五之间，且在对应的时间段，显示直播中
            if (week > 0 && week < 6 && time_range(beginTime, endTime)) {
                $(item).addClass("hl");
            }
        });

        function time_range(beginTime, endTime) {
            var strb = beginTime.split(":");
            if (strb.length != 2) {
                return false;
            }

            var stre = endTime.split(":");
            if (stre.length != 2) {
                return false;
            }

            var b = new Date();
            var e = new Date();
            var n = new Date();

            b.setHours(strb[0]);
            b.setMinutes(strb[1]);
            e.setHours(stre[0]);
            e.setMinutes(stre[1]);

            if (n.getTime() - b.getTime() > 0 && n.getTime() - e.getTime() < 0) {
                return true;
            } else {
                return false;
            }
        }

    }
    checkCourseTimer();
    //定时器
    setInterval(checkCourseTimer, 1000 * 60);
</script>
</body>
</html>